<template>
  <div class="contents">
    <div class="contetn_left">
      <ItemWrap title="订单统计" />
      <StatisticsText />
      <StatisticsBar :chartData="CountData" :xAxisLabels="CountLabels" />
      <ItemWrap title="重量统计" style="margin-top: 5px" />
      <WeightText />
      <Weight :chartData="CountData" :xAxisLabels="CountLabels" />
    </div>
    <div class="contetn_center">
      <CenterMap class="contetn_center_top" style="height: 100%;" />
    </div>
    <div class="contetn_left">
      <ItemWrap title="资金统计" />
      <AmountText />
      <ItemWrap title="会员统计" style="margin-top: 5px" />
      <User :chartData="CountData" :xAxisLabels="CountLabels" />
      <ItemWrap title="最新订单" style="margin-top: 5px" />
      <List/>
    </div>
  </div>
</template>

<script>
import CenterMap from "./center-map.vue";
import StatisticsText from "../order/statistics-text.vue";
import StatisticsBar from "../order/statistics-bar.vue";
import Weight from "../order/weight.vue";
import WeightText from "../order/weight-text.vue";
import User from "../user/user.vue";
import AmountText from "../order/amount-text.vue";
import List from "../order/list.vue";
// import PageBg from "assets/canvas/page-backgeound.vue";

export default {
  components: {
    CenterMap,
    StatisticsText,
    StatisticsBar,
    Weight,
    User,
    WeightText,
    AmountText,
    List
  },
  data() {
    return {
      CountData: [120, 200, 150, 80, 70, 110, 130],
      CountLabels: ["202409", "202410", "202411", "202412", "202501", "202502"],
    };
  },
  mounted() {
    // 模拟动态更新数据
    setTimeout(() => {
      this.CountData = [100, 150, 200, 250, 300, 350, 400];
      this.CountLabels = [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
      ];
    }, 3000);
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {},

  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
// 内容

.contetn_left,
.contetn_right {
  width: 20%;
  padding: 16px 0;
}

// 中间
.contetn_center {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>
